<template>
  <div :class="styles.query">
    <div @click="toCity" :class="styles.queryLeft">
      <div :class="styles.cityName">{{ cityName }}</div>
      <i class="iconfont icon-31dingwei" :class="styles.dingweiIcon"></i>
    </div>
    <van-search
      :class="styles.search"
      shape="round"
      @search="search"
      placeholder="阿姨/月嫂/育婴师"
    ></van-search>
  </div>
</template>

<script lang="ts">
import { onMounted, computed } from 'vue';
import Taro from '@tarojs/taro';
import { useLocationStore } from '@/stores';
import styles from './index.module.less';

export default {
  setup() {
    const locationStore = useLocationStore();

    const cityName = computed(() => locationStore.location.cityName);

    onMounted(async () => {
      if (!locationStore.location.cityName) {
        await locationStore.getLocation();
      }
    });
    const toCity = () => {
      Taro.navigateTo({
        url: '/subpackages/city-select/index',
      });
    };
    const search = (e) => {
      Taro.navigateTo({
        url: `/subpackages/commodity-list/index?name=${e.detail}`,
      });
    };
    return {
      styles,
      cityName,
      toCity,
      search,
    };
  },
};
</script>
